<template>
  <div style="padding: 20px">
    <!--搜索表单-->
    <div>
      <el-input style="width: 220px; margin-left: 5px; margin-top: 5px" placeholder="请输入用户名"
                v-model="params.username"></el-input>
      <el-input style="width: 200px; margin-left: 5px; margin-top: 5px" placeholder="请输入姓名"
                v-model="params.name"></el-input>
      <el-input style="width: 220px; margin-left: 5px; margin-top: 5px" placeholder="请输入联系方式"
                v-model="params.phone"></el-input>
      <el-input style="width: 240px; margin-left: 5px; margin-top: 5px" placeholder="请输入邮箱"
                v-model="params.email"></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
    </div>

    <!--表单主体-->
    <el-table :data="tableData" stripe style="margin-top: 20px;flex: 1">
      <el-table-column type="index" label="序号" style="margin-right: 5px"></el-table-column>
      <el-table-column prop="uid" label="UID" show-overflow-tooltip></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200px"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="updateDate" label="更新时间"></el-table-column>
      <el-table-column prop="lastLoginDate" label="上次登录时间"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template v-slot="scope">
          <el-button type="primary" @click="$router.push('/editAdmin?uid=' + scope.row.uid)" >编辑</el-button>
          <el-popconfirm
              title="确定删除吗？"
              @confirm="del(scope.row.uid)"
          >
            <el-button type="danger" slot="reference" style="margin-left: 5px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div style="margin-top: 15px; position: fixed; bottom: 5%; right: 5%">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import Cookies from "js-cookie";

export default {
  name: 'AdminList',
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10
      },
      login: Cookies.get('login') ? JSON.parse(Cookies.get('login')) : {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get('admin/page', {
        params: this.params
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    reset() {
      //点击重置按钮重置
      this.params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.load()
    },
    del(uid){
      if(this.login.uid === uid){
        this.$notify.error({title: "", message:"不能删除当前登录的账户", position: 'bottom-left'});
        return;
      }
      request.delete("/admin/delete/" + uid).then(res => {
        if(res.code === "200"){
          this.$notify.success({title: "", message:'删除成功', position: 'bottom-left'})
          this.load()
        }else{
          this.$notify.error({title: "", message:res.msg, position: 'bottom-left'});
        }
      })
    },
    handleCurrentChange(pageNum) {
      //点击分页按钮触发分页
      this.params.pageNum = pageNum
      this.load()
    }
  }
}
</script>